<template>
  <div class="loginMain" v-show="codeShowStatus">
    <div class="input-box">
      <img src="http://static.52letsgo.cn/zz/wechatimg/ic_login_phone.png" class="img">
      <input type="text" @change="onInput" class="username" v-model="loginData.phone" placeholder="请输入手机号码" autocomplete="new-password">
    </div>
    <div class="input-box">
      <img src="http://static.52letsgo.cn/zz/wechatimg/ic_login_key.png" class="img">
      <input type="text" @change="onInput" class="pwd" v-model="loginData.code" placeholder="请输入验证码">
      <div class="code_btn">
        <box>
          <x-button :type="codeStatus.codeType" @click="getCode" :disabled="codeStatus.disabled">{{codeStatus.codeTitle}}</x-button>
        </box>
      </div>
    </div>
  </div>
</template>
<script>
import { XInput, Group, XButton, Box } from './../../../components'
var MyRequest = require('./../../../commons/js/MyRequest.js')
var Global = require("./../../../commons/js/Global.js")
var LocalStorageUtil = require('./../../../commons/js/LocalStorageUtil.js')
export default {
  props: {
    codeShowStatus: Boolean
  },
  data () {
    return {
      loginData: {
        phone: "",
        code: "",
        citys: [],
        selectedCity: [],
        showSelectAddress: false,
        isNewUser: false
      },
      codeStatus: {
        disabled: false,
        codeType: 'warn',
        codeTitle: "获取验证码",
        time: 60
      }
    }
  },
  created: function () {
    console.log(this.codeShowStatus)
  },
  components: {
    XInput,
    Group, 
    XButton, 
    Box
  },
  methods: {
    onInput () {
      this.$emit('message', this.loginData)
    },
    getCitys (that) {
      console.log("getCitys")
      var data = {
        action: "list"
      }
      MyRequest.MyGet("Citys", that, function (result, self) {
        console.log(result)
        if(!result.success) {
          Global.showToast(result.msg, self)
          return
        }
        var newCitys = []
        for(var i = 0; i < result.data.length; i ++) {
          var item = result.data[i]
          newCitys.push({
            name: item.cityName,
            value: item.id
          })
        }
        self.loginData.citys = [newCitys]
        self.loginData.selectedCity = [result.data[0].id]
        self.loginData.showSelectAddress = true
        self.loginData.isNewUser = true
        console.log(self.loginData.citys)
        console.log(self.loginData.showSelectAddress)
        console.log(self.loginData.selectedCity)
        self.$emit('showaddress', self.loginData)
      }, data)
    },
    getCode () {
      if(!(/^1[34578]\d{9}$/.test(this.loginData.phone))) {
          Global.showToast('请检查手机号格式', this)
          return; 
      } 
      var data = {
        action: "quickMobileCode",
        mobile: this.loginData.phone,
      }
      MyRequest.MyGetWithToast("quickMobileCode", this, function (result, that) {
        console.log(result)
        Global.closeLoading();
        if(!result.success) {
          Global.showToast(result.msg, that)
          return;
        }
        Global.showToast( "发送成功", that)
        console.log(result.data)
        if (!result.data) {
          that.getCitys(that)
        }
        //开一个定时器
        that.codeStatus = {
          disabled: true,
          codeType: 'default',
          codeTitle: "60",
          time: 60
        }
        var t = setInterval(function () {
          that.codeStatus.codeTitle = --that.codeStatus.time;
          if (that.codeStatus.time <= 0) {
            clearInterval(t);
            that.codeStatus = {
              disabled: false,
              codeType: 'warn',
              codeTitle: "获取验证码",
              time: 60
            }
          }
        }, 1000)
      }, data)
    }
  }
}
</script>
<style>
  .loginMain {
    position: relative;
    width: 100%;
  }
  .loginMain .input-box {
    display: flex;
    padding: 1rem 0;
    margin: 0 1rem;
    border-bottom: 1px solid #e5e5e5;
  }
  .loginMain .input-box .img {
    width: 2.4rem;
    height: 2.4rem;
    padding-top: 3px;
  }
  .loginMain .input-box input {
    flex: 1;
    border: 0;
    outline: none;
    padding-left: 1rem;
    background-color: #fff;
    font-family: "微软雅黑";
    height: 2.4rem;
    font-size: 1.4rem;
    padding-top: 3px;
  }
   .loginMain .input-box .code_btn {
    width: 9rem;
  }
   .loginMain .input-box .code_btn .weui_btn {
     padding-left: 0;
     padding-right: 0;  
     line-height: 2.6rem;
     padding-top: 1px;
     padding-bottom: 1px;
   }
  .loginMain .input-box .code_btn button {
    font-size: 1.3rem;
    font-family: "微软雅黑";
  }
   .loginMain .weui_btn_default {
    background-color: #F8F8F8 !important;
  }
</style>